<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card style="max-width: 100%;height: 645px;">

                    <div class="demo-image__placeholder">
                        <div class="image-container">
                            <el-image :src="dock_info.imageUrl" />
                        </div>
                        <span class="namestyle">{{ dock_info.name }}</span>
                    </div>
                    <div class="title">
                        基本信息
                    </div>
                    <div class="basics">
                        <div class="label">机场型号: {{ dock_info.model }}</div>
                        <div class="label">设备序列号: {{ dock_info.serialNumber }}</div>
                        <div class="label">固件版本: {{ dock_info.firmwareVersion }}</div>
                        <div class="label">MQTT网关地址: {{ dock_info.mqttGateway }}</div>
                        <div class="label">MQTT账号: {{ dock_info.mqttUsername }}</div>
                        <div class="label">MQT密码: {{ dock_info.mqttPassword }}</div>
                        <div class="label">组织ID: {{ dock_info.orgId }}</div>
                        <div class="label">设备绑定码：{{ dock_info.bindCode }}</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card style="max-width: 100%">
                    <template #header>
                        <div class="card-header">
                            <span>飞行历史</span>
                            <!-- <div class="demo-date-picker"> -->
                            <div>
                                <el-date-picker v-model="value1" type="daterange" range-separator="-"
                                    start-placeholder="Start date" end-placeholder="End date" :size="size" />
                                <!-- </div> -->
                            </div>
                        </div>
                    </template>
                    <div style="flex: 1; overflow: hidden;">
                        <el-table v-loading="loading" :data="form" height="500px">
                            <el-table-column label="飞行时间" align="center" prop="execTime" />
                            <el-table-column label="任务信息" align="center" prop="taskName" />
                            <el-table-column label="任务状态" align="center" prop="status">
                                <template #default="scope">
                                    <dict-tag :options="task_status" :value="scope.row.status" />
                                </template>
                            </el-table-column>
                            <el-table-column label="飞行信息" align="center" prop="flightInfo" />
                            <el-table-column label="飞手" align="center" prop="pilotName" />

                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                <template #default="scope">
                                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                        v-hasPermi="['equipment:drone_info:edit']">查看
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <pagination v-show="onlineTotal >= 0" :total="onlineTotal" :page="onlineQuery.pageNum"
                        :limit="onlineQuery.pageSize" :page-sizes="[5, 10, 20, 50]"
                        @pagination="handleExecRecordPagination" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import {
    listDock_info,
    getDock_info,
    delDock_info,
    addDock_info,
    updateDock_info
} from "@/api/equipment/dock_info";
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { listTask, getTask, addTask, updateTask, delTask, pauseTask, stopTask, getTaskExecRecords,getMonthlySchedule,getTaskByDockId} from '@/api/uavTask/task'
import { useDict } from "@/utils/dict.js";
import { watch } from 'vue'
import dayjs from 'dayjs'
const value1 = ref([])
const { task_exec_type, task_exec_cycle, task_status } = useDict('task_exec_type', 'task_exec_cycle', 'task_status')
const form = ref([]);
const route = useRoute()
const userId = route.query.selected

const dock_info = ref([]);

const onlineTotal = ref(0)
const onlineQuery = ref({
    pageNum: 1,
    pageSize: 10,
    dockId: undefined,
})

// 监听日期变化（正确方式）
watch(
    () => value1.value,
    (newVal) => {
        console.log('日期范围变化:', newVal) // 调试日志
        // if (newVal && newVal.length === 2) {
        //     getTaskExecRecordsList()
        // }
        getTaskExecRecordsList()
    },
    { deep: true }
)
// 处理执行记录分页
  const handleExecRecordPagination = (val) => {
   onlineQuery.value.pageNum = val.page
   onlineQuery.value.pageSize = val.limit
   getTaskExecRecordsList()
 }
// const src =
//   'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'

/** 修改按钮操作 */
// function handleUpdate(row) {
//     reset();
//     const _id = row.id || ids.value
//     getDock_info(_id).then(response => {
//         form.value = response.data;
//         open.value = true;
//         title.value = "修改无人机信息";
//     });
//     getUnboundAirports()
// }

//获取机场基本信息
getDock_info(userId).then(response => {
    dock_info.value = response.data;
    dock_info.value.imageUrl = import.meta.env.VITE_APP_URL + dock_info.value.imageUrl

})

// const data = ref({
//     name: '',
//     model: '',
//     serialNumber: '',
//     firmwareVersion: '',
//     mqttGateway: '',
//     mqttUsername: '',
//     mqttPassword: '',
//     orgId: '',
//     bindCode: '',
//     status: '',
//     bindStatus: '',
//     imageUrl: '',
//     droneName: '',
//     droneModel: '',
//     droneId: ''
// })
// 格式化任务状态
// const statusFormat = (row) => {
//    const status = task_status.value.find(item => item.value === row.status)
//    return status ? status.label : ''
// }

// 获取飞行历史列表信息
const getTaskExecRecordsList = () => {
    const [start, end] = value1.value || []
    // 转换为 "YYYY-MM-DD" 格式字符串
    const beginTime = start ? dayjs(start).format('YYYY-MM-DD') : null
    const endTime = end ? dayjs(end).format('YYYY-MM-DD') : null
    
    getTaskByDockId({
        dockId: userId,
        pageNum: onlineQuery.value.pageNum,
        pageSize: onlineQuery.value.pageSize,
        beginTime,
        endTime
    }) // 建议传入当前设备的userId
    .then(response => {
        // 将接口返回数据赋值给form
        // debugger
        form.value = response.rows; 
        // 如果接口返回的是数组结构，可能需要：
        // form.value = response.data[0]; 
            
        // 注意保持你原有的分页逻辑（如果需要）
        onlineTotal.value = response.total
    })
    .catch(error => {
        console.error('获取任务失败:', error);
    });
    }




onMounted(() => {
  getTaskExecRecordsList() // 初始化加载数据
})
</script>

<style scoped>
:deep(.el-table__row) {
    height: 46px;
    /* 调整为更大的值，默认约48px */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.basics {
    font-size: 14px;
    position: relative;
    margin-top: 34px;
    min-height: 322px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "a b";
    color: #1a1a1acc;
    margin-bottom: 20px;
}

.basics::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 45%;
    border-left: 1px solid var(--el-border-color);
}

.title {
    font-size: 16px;
    line-height: 14px;
    color: #3a3e5f;
    font-weight: 700;
}

.label {
    display: inline-block;
    /* color: #696969cc; */
    color: #3a3636cc;
    display: flex;
    flex-direction: row;

    .labeldiv {
        width: 90px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
    }
}

/* 新增样式 */
.demo-image__placeholder {
    display: flex;
    align-items: center;
    gap: 20px;
    /* 图片和名称间距 */
    padding: 20px 0;
}

.demo-image__placeholder .block {
    /* 修改图片容器为块级元素 */
    display: block !important;
    width: 100% !important;
    padding: 30px 0 0 0 !important;
}

.image-container {
    flex: 0 0 180px;
    /* 固定图片容器宽度 */
    height: 150px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f7fa;
}

.image-container .el-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.demo-image__placeholder .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.demo-image__placeholder .el-image {
    margin: 0 auto;
}

.demo-image__placeholder.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 14px;
}

.demo-image__placeholder .dot {
    animation: dot 2s infinite steps(3, start);
    overflow: hidden;
}

.namestyle {
    /* 移除原有 line-height 和 margin */
    line-height: normal !important;
    margin-left: 0 !important;

    /* 新增样式 */
    display: block;
    width: 100%;
    /* text-align: center; */
    margin-top: 20px;
    word-break: break-all;
    /* 允许长单词换行 */
    white-space: normal;
    /* 允许换行 */

    flex: 1;
    font-size: 24px;
    font-weight: 500;
}
</style>